<template>
  <div class="bg-purple">
    <div v-for="(item, index) in detailsList" :key="index">
      <h6 class="hLabel">主体信息</h6>
      <div class="subjectInformationLeft">
        <div class="subjectInformationTitle">
          <div class="title">
            <div> 入驻类型 </div>
            <div> 营业执照名称 </div>
            <div> 营业执照有效期 </div>
            <div>营业执照地址</div>
            <div> 营业执照 </div>
            <div> 办公环境 </div>
          </div>
          <div class="content">
            <div>
              {{
                item.merchantsapplyfor.subjectType == 'SUBJECT_TYPE_INDIVIDUAL'
                  ? '个体工商户'
                  : '企业'
              }}
            </div>
            <el-tooltip
              class="item"
              effect="dark"
              :content="item.businesslicense.merchantName"
              placement="top"
            >
              <div class="font-overflow">
                {{ item.businesslicense.merchantName }}
              </div>
            </el-tooltip>
            <div
              >{{ item.businesslicense.periodBegin }} -
              {{ item.businesslicense.periodEnd }}
            </div>

            <el-tooltip
              class="item"
              effect="dark"
              :content="item.businesslicense.licenseAddress"
              placement="top"
            >
              <div class="font-overflow">
                {{ item.businesslicense.licenseAddress }}</div
              >
            </el-tooltip>

            <div
              class="view"
              @click="
                onPreview(item.businesslicense.licenseCopy, 'licenseCopy')
              "
            >
              查看预览

              <el-image-viewer
                v-if="showViewer"
                style="z-index: 9999"
                :on-close="closeViewer"
                :url-list="urlListArray"
              />
            </div>
            <div
              class="view"
              @click="onPreview(item.businessinfo.indoorPic, 'indoorPic')"
            >
              查看预览
            </div>
          </div>
        </div>
        <div class="subjectInformationContent">
          <div class="title">
            <div> 商户简称 </div>
            <div> 营业执照编号</div>
            <div> 门头照片 </div>
            <div> 特殊资质 </div>
            <div> 所在行业 </div>
          </div>
          <div class="content">
            <div class="font-overflow">
              {{ item.businessinfo.merchantShortname }}
            </div>
            <div class="font-overflow">
              {{ hiddenCardId(item.businesslicense.licenseNumber) }}
            </div>
            <div
              class="view"
              @click="
                onPreview(
                  item.businessinfo.storeEntrancePic,
                  'storeEntrancePic'
                )
              "
            >
              查看预览
            </div>
            <div
              class="view"
              @click="
                onPreview(item.settlement.qualifications, 'storeEntrancePic')
              "
            >
              查看预览
            </div>
            <div class="font-overflow">
              {{ item.settlement.qualificationType }}
            </div>
          </div>
        </div>
      </div>
      <h6 class="hLabel">法人/负责人姓名</h6>
      <div class="subjectInformationLeft">
        <div class="subjectInformationTitle">
          <div class="title">
            <div> 姓名 </div>
            <div> 证件地址 </div>
            <div> 证件正面 </div>
          </div>
          <div class="content">
            <div> {{ item.businesslicense.legalPerson }} </div>
            <el-tooltip
              class="item"
              effect="dark"
              :content="item.merchantsapplyfor.idCardAddress"
              placement="top"
            >
              <div class="font-overflow">
                {{ item.merchantsapplyfor.idCardAddress }}
              </div>
            </el-tooltip>
            <div
              class="view"
              @click="
                onPreview(item.merchantsapplyfor.idCardCopy, 'idCardCopy')
              "
            >
              查看预览

              <!-- <el-image-viewer v-if="showViewer"
                               :on-close="closeViewer"
                               :url-list="idCardCopyArr(item.merchantsapplyfor.idCardCopy
)" /> -->
            </div>
          </div>
        </div>
        <div class="subjectInformationContent">
          <div class="title">
            <div> 证件有效期 </div>
            <div> 身份证号 </div>
            <div> 证件反面</div>
          </div>
          <div class="content">
            <div>
              {{ item.merchantsapplyfor.cardPeriodBegin }} -
              {{ item.merchantsapplyfor.cardPeriodEnd }}
            </div>
            <div> {{ hiddenCardId(item.merchantsapplyfor.idCardNumber) }} </div>

            <div
              class="view"
              @click="
                onPreview(
                  item.merchantsapplyfor.idCardNational,
                  'idCardNational'
                )
              "
            >
              查看预览

              <!-- <el-image-viewer v-if="showViewer"
                               :on-close="closeViewer"
                               :url-list="idCardNationalArr()" /> -->
            </div>
          </div>
        </div>
      </div>
      <h6 class="hLabel">经营信息</h6>
      <div class="subjectInformationLeft">
        <div class="subjectInformationTitle">
          <div class="title">
            <div> 详情地址 </div>
            <div> 注册地址 </div>
            <div> 手机号码 </div>
          </div>
          <div class="content">
            <div class="font-overflow">
              {{ getRegionLabel(item.businessinfo.bizAddressCode) }}
            </div>
            <el-tooltip
              class="item"
              effect="dark"
              :content="item.businessinfo.bizStoreAddress"
              placement="top"
            >
              <div class="font-overflow">
                {{ item.businessinfo.bizStoreAddress }}</div
              >
            </el-tooltip>
            <div>{{ hiddenCardId(item.merchantsapplyfor.mobilePhone) }} </div>
          </div>
        </div>
        <div class="subjectInformationContent">
          <div class="title">
            <div> 电子邮箱 </div>
          </div>
          <div class="content">
            <div> {{ hiddenCardId(item.merchantsapplyfor.contactEmail) }} </div>
          </div>
        </div>
      </div>
      <h6 class="hLabel">结算到银行卡</h6>
      <div class="subjectInformationLeft">
        <div class="subjectInformationTitle">
          <div class="title">
            <div> 开户城市 </div>
            <div> 开户名称 </div>
            <div> 开户类型 </div>
          </div>
          <div class="content">
            <div> {{ getRegionLabel(item.bankaccount.bankAddressCode) }} </div>
            <div> {{ item.bankaccount.accountBank }} </div>
            <div>
              {{
                item.bankaccount.bankAccountType ==
                'BANK_ACCOUNT_TYPE_CORPORATE'
                  ? '对公银行账户'
                  : '经营者个人银行卡'
              }}
            </div>
          </div>
        </div>
        <div class="subjectInformationContent">
          <div class="title">
            <div> 抽佣比例 </div>
            <div> 银行账号</div>
          </div>
          <div class="content">
            <div> {{ item.settlement.activitiesRate }} </div>
            <div> {{ hiddenCardId(item.bankaccount.accountNumber) }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import ElImageViewer from 'element-ui/packages/image/src/image-viewer';
  import { getRegionLabel, cityData } from 'ele-admin/packages/utils/regions';
  export default {
    name: 'incomingDetails',
    components: {
      ElImageViewer
    },
    props: {
      detailsList: {
        type: Array,
        default: () => []
      }
    },
    data() {
      return {
        showViewer: false, // 显示查看器
        // 图片预览数组
        imgViewArr: []
      };
    },
    methods: {
      // 点击按钮预览图片
      onPreview(imgStr) {
        if (imgStr.length) {
          if (imgStr.includes(',')) {
            console.log('字符串中包含逗号');
            // 包含的进行slice(',') 分割

            this.imgViewArr = imgStr.split(',').map((item) => item.trim());
          } else {
            console.log('字符串中不包含逗号');
            this.imgViewArr = imgStr.split();
          }

          this.showViewer = true;
        } else {
          this.$message({
            message: '没有上传图片无法进行预览',
            type: 'warning'
          });
        }
      },
      // 关闭查看器
      closeViewer() {
        this.showViewer = false;
      }
    },
    computed: {
      // 营业执照
      urlListArray() {
        return this.imgViewArr;
      },
      // ** 隐私部分带*号
      hiddenCardId() {
        return function (str, frontLen = 5, endLen = 6) {
          //str：要进行隐藏的变量  frontLen: 前面需要保留几位    endLen: 后面需要保留几位
          var len = str.length - frontLen - endLen;
          var start = '';
          for (var i = 0; i < len; i++) {
            start += '*';
          }
          // 最后的返回值由三部分组成
          return (
            str.substring(0, frontLen) +
            start +
            str.substring(str.length - endLen)
          );
        };
      },
      //  code码获取城市标题
      getRegionLabel() {
        return function (params) {
          console.log(cityData);

          return getRegionLabel(params);
        };
      }
    }
  };
</script>
<style lang="less" scoped>
  .bg-purple {
    margin-top: 20px;
    padding-bottom: 50px;
    // h标签
    min-width: 850px;
    .hLabel {
      margin: 10px 0 20px;
      font-weight: 700;
      &::before {
        content: '';
        display: inline-block;
        vertical-align: top;

        margin-right: 5px;
        height: 23px;
        width: 6px;
        background-color: #1e6ceb;
      }
    }

    .subjectInformationLeft {
      display: flex;
      align-items: center;
      justify-content: center;

      .subjectInformationTitle {
        width: 792px;

        //   background-color: aqua;
        display: flex;
        align-items: center;
        justify-content: center;

        .title {
          margin-right: 46px;
          text-align: right;
          width: 100px;
          div {
            color: #666;
            margin: 10px 0 10px;
          }
        }
        .content {
          width: 250px;
          div {
            color: #000;
            margin: 10px 0 10px;
          }
          .view {
            color: #1e6ceb;
            cursor: pointer;
          }
        }
      }
      .subjectInformationContent {
        display: flex;
        align-items: center;
        justify-content: center;

        .title {
          margin-right: 46px;
          text-align: right;
          width: 100px;
          div {
            color: #666;
            margin: 10px 0 10px;
          }
        }
        .content {
          width: 250px;
          div {
            color: #000;
            margin: 10px 0 10px;
          }
          .view {
            color: #1e6ceb;
            cursor: pointer;
          }
        }
        width: 792px;

        //   background-color: aquamarine;
      }
    }
  }
</style>
